<template>
    <view class="wanl-order-list">
        <view class="navbar">
            <view
                class="nav-item text-df"
                v-for="(item, index) in navList"
                :key="item.state"
                :class="{ current: tabCurrentIndex === index }"
                @tap="tabClick(index)"
            >
                {{ item.text }}
            </view>
        </view>
        <swiper
            :current="tabCurrentIndex"
            style="height: calc(100% - 80rpx)"
            duration="300"
            @change="changeTab"
        >
            <swiper-item
                class="tab-content"
                v-for="(tag, key) in navList"
                :key="tag.state"
            >
                <scroll-view
                    class="list-scroll-content"
                    scroll-y
                    @scrolltolower="loadData"
                >
                    <!-- 空白页 -->
                    <wanl-empty
                        text="没有找到任何订单"
                        v-if="tag.loaded === true && tag.orderList.length === 0"
                    />
                    <!-- 订单列表 -->
                    <view
                        v-for="(order, okey) in tag.orderList"
                        :key="order.id"
                        class="order-item radius-bock"
                    >
                        <view class="head">
                            <view
                                class="shop wanl-gray"
                                @tap="onShop(order.shop_id)"
                            >
                                <text class="wlIcon-dianpu1 wanl-black"></text>
                                <text class="wanl-black margin-lr-xs text-30">{{
                                    order.shop.shopname
                                }}</text>
                                <text
                                    class="wlIcon-fanhuigengduo text-sm"
                                ></text>
                            </view>
                            <view class="margin-right-bj text-sm">
                                <text
                                    class="state"
                                    :style="{ color: order.stateTipColor }"
                                    >{{ order.stateTip }}</text
                                >
                                <text
                                    v-if="order.state === 7"
                                    class="margin-left-sm wlIcon-lajitong"
                                    @tap="deleteOrder(order.id, okey)"
                                ></text>
                            </view>
                        </view>
                        <!-- 商品 -->
                        <view
                            class="goods-box"
                            v-for="(goods, gkey) in order.goods"
                            :key="goods.id"
                            @tap="onDetails(order.id, 'order')"
                        >
                            <view
                                class="cu-avatar xl margin-right-bj radius"
                                :style="{
                                    backgroundImage:
                                        'url(' +
                                        $wanlshop.oss(goods.image, 70, 70) +
                                        ')',
                                }"
                            >
                            </view>
                            <view class="content margin-right-bj">
                                <view class="describe">
                                    <view class="text-cut-2">
                                        {{ goods.title }}
                                    </view>
                                    <view class="wanl_sku text-min">
                                        <text class="wanl-gray-dark">{{
                                            goods.difference
                                        }}</text>
                                    </view>
                                </view>
                                <view class="parameter">
                                    <view
                                        v-if="goods.group_type === 'alone'"
                                        class="text-sm text-black"
                                    >
                                        直购
                                    </view>
                                    <view
                                        v-else-if="goods.group_type === 'group'"
                                        class="text-sm text-black"
                                    >
                                        {{ goods.people_num }}人团
                                    </view>
                                    <view
                                        v-else-if="
                                            goods.group_type === 'ladder'
                                        "
                                        class="text-sm text-black"
                                    >
                                        {{ goods.people_num }}人阶梯
                                    </view>
                                    <view class="text-price text-sm text-black">
                                        {{ goods.group_price }}
                                    </view>
                                    <view class="text-min wanl-gray">
                                        x {{ goods.number }}
                                    </view>
                                    <!-- 退款状态:0=未退款,1=退款中,2=待退货,3=退款完成 -->
                                    <view
                                        class="text-min text-yellow"
                                        v-if="goods.refund_status != 0"
                                    >
                                        {{ getRefund(goods.refund_status) }}
                                    </view>
                                </view>
                            </view>
                        </view>
                        <!-- 底部 -->
                        <view class="price-box text-sm flex">
                            <view
                                v-if="order.pay.discount_price > 0"
                                class="margin-right-sm wanl-gray"
                                >优惠：<text class="text-price">{{
                                    order.pay.discount_price
                                }}</text></view
                            >
                            <view
                                v-if="order.pay.freight_price > 0"
                                class="margin-right-sm wanl-gray"
                                >快递：<text class="text-price">{{
                                    order.pay.freight_price
                                }}</text></view
                            >
                            <view
                                >实付款：<text class="text-price">{{
                                    order.pay.price
                                }}</text></view
                            >
                        </view>
                        <view
                            class="action-box padding-bottom-bj"
                            v-if="order.state == 1"
                        >
                            <!-- <button class="cu-btn round line-black margin-lr-bj"
								@tap="editAddress(order.id)">修改地址</button> -->
                            <button
                                class="cu-btn round line-black"
                                @tap="cancelOrder(order)"
                            >
                                取消拼团
                            </button>
                            <button
                                class="cu-btn round margin-lr-bj wanl-bg-orange"
                                @tap="paymentOrder(order.id)"
                            >
                                立即支付
                            </button>
                        </view>
                        <view
                            class="action-box padding-bottom-bj"
                            v-if="order.state == 2"
                        >
                            <button
                                class="cu-btn round line-black"
                                @tap="toChat(order.shop_id)"
                            >
                                联系商家
                            </button>
                            <button
                                class="cu-btn round margin-lr-bj wanl-bg-orange"
                                @tap="
                                    onDetails(order.goods[0].group_no, 'team')
                                "
                            >
                                邀请参团
                            </button>
                        </view>
                        <view
                            class="action-box padding-bottom-bj"
                            v-if="order.state == 3"
                        >
                            <button
                                class="cu-btn round line-black"
                                @tap="toChat(order.shop_id)"
                            >
                                联系商家
                            </button>
                            <button
                                v-if="order.goods[0].group_type !== 'alone'"
                                class="cu-btn round wanl-bg-orange margin-left-bj"
                                @tap="
                                    onDetails(order.goods[0].group_no, 'team')
                                "
                            >
                                查看拼团
                            </button>
                            <!-- <button class="cu-btn round margin-lr-bj line-black"
								@tap="editAddress(order.id)">修改地址</button> -->
                        </view>
                        <view
                            class="action-box padding-bottom-bj"
                            v-if="order.state == 4"
                        >
                            <button
                                class="cu-btn round line-black"
                                @tap="toLogistics(order.id)"
                            >
                                查看物流
                            </button>
                            <button
                                v-if="order.goods[0].group_type !== 'alone'"
                                class="cu-btn round wanl-bg-orange margin-left-bj"
                                @tap="
                                    onDetails(order.goods[0].group_no, 'team')
                                "
                            >
                                查看拼团
                            </button>
                            <button
                                class="cu-btn round margin-lr-bj wanl-bg-orange"
                                @tap="confirmOrder(order)"
                            >
                                确认收货
                            </button>
                        </view>
                        <view
                            class="action-box padding-bottom-bj"
                            v-if="order.state == 5"
                        >
                            <button
                                class="cu-btn round line-black"
                                @tap="toLogistics(order.id)"
                            >
                                查看物流
                            </button>
                            <button
                                v-if="order.goods[0].group_type !== 'alone'"
                                class="cu-btn round wanl-bg-orange margin-left-bj"
                                @tap="
                                    onDetails(order.goods[0].group_no, 'team')
                                "
                            >
                                查看拼团
                            </button>
                            <button
                                class="cu-btn round margin-lr-bj line-black"
                                @tap="commentOrder(order.id)"
                            >
                                评论订单
                            </button>
                        </view>
                    </view>
                    <uni-load-more
                        :status="tag.loadingType"
                        :content-text="contentText"
                    />
                    <view class="edgeInsetBottom"></view>
                </scroll-view>
            </swiper-item>
        </swiper>
    </view>
</template>

<script>
export default {
    data() {
        return {
            tabCurrentIndex: 0,
            navList: [
                {
                    state: 0,
                    text: "全部",
                    loadingType: "more",
                    current_page: 1,
                    orderList: [],
                },
                {
                    state: 1,
                    text: "待支付",
                    loadingType: "more",
                    current_page: 1,
                    orderList: [],
                },
                {
                    state: 2,
                    text: "待成团",
                    loadingType: "more",
                    current_page: 1,
                    orderList: [],
                },
                {
                    state: 3,
                    text: "待发货",
                    loadingType: "more",
                    current_page: 1,
                    orderList: [],
                },
                {
                    state: 4,
                    text: "待收货",
                    loadingType: "more",
                    current_page: 1,
                    orderList: [],
                },
                {
                    state: 5,
                    text: "待评论",
                    loadingType: "more",
                    current_page: 1,
                    orderList: [],
                },
            ],
            contentText: {
                contentdown: " ",
                contentrefresh: "正在加载...",
                contentnomore: "",
            },
        };
    },
    onLoad(options) {
        if (!options.state) {
            options.state = 0;
        }
        this.tabCurrentIndex = +options.state;
        // #ifndef MP
        this.loadData();
        // #endif
        // #ifdef MP
        if (options.state == 0) {
            this.loadData();
        }
        // #endif
    },
    onShow() {
        this.loadData();
    },
    methods: {
        //联系商家
        toChat(id) {
            uni.navigateTo({
                url: `/liu/pages/service?shop_id=${id}&type=chat`,
            });
        },
        //获取订单列表
        async loadData(source) {
            //这里是将订单挂载到tab列表下
            let index = this.tabCurrentIndex;
            let navItem = this.navList[index];
            let state = navItem.state;
            //判断是否最后一页
            if (navItem.loadingType == "noMore") {
                return;
            }
            //tab切换只有第一次需要加载数据
            if (source === "tabChange" && navItem.loaded === true) {
                return;
            }
            //防止重复加载
            if (navItem.loadingType === "loading") {
                return;
            }
            navItem.loadingType = "loading";
            // 获取列表
            let res = await this.$request.get(
                "api/wanlshop.groups.order/getOrderList",
                {
                    state: state,
                    page: navItem.current_page,
                }
            );
            navItem.current_page = res.data.current_page; //当前页码
            if (res.data.last_page === res.data.current_page) {
                navItem.loadingType = "noMore";
            } else {
                navItem.loadingType = "more";
                navItem.current_page++;
            }
            let orderList = res.data.data.filter((item) => {
                //添加不同状态下订单的表现形式
                item = Object.assign(item, this.orderStateExp(item.state));
                //演示数据所以自己进行状态筛选
                if (state === 0) {
                    //0为全部订单
                    return item;
                }
                return item.state === state;
            });
            orderList.forEach((item) => {
                navItem.orderList.push(item);
            });
            //loaded新字段用于表示数据加载完毕，如果为空可以显示空白页
            this.$set(navItem, "loaded", true);
        },
        //订单状态文字和颜色
        // 订单状态:1=待支付,2=待成团,3=待发货,4=待收货,5=待评论,6=已完成,7=已取消
        orderStateExp(state) {
            let stateTip = "",
                stateTipColor = "#333";
            switch (+state) {
                case 1:
                    stateTip = "等待支付";
                    stateTipColor = "#f40";
                    break;
                case 2:
                    stateTip = "等待分享成团";
                    break;
                case 3:
                    stateTip = "等待卖家发货";
                    break;
                case 4:
                    stateTip = "卖家已发货";
                    break;
                case 5:
                    stateTip = "交易成功";
                    break;
                case 6:
                    stateTip = "已完成";
                    break;
                case 7:
                    stateTip = "订单已关闭";
                    stateTipColor = "#777";
                    break;
                //更多自定义
            }
            return {
                stateTip,
                stateTipColor,
            };
        },
        getRefund(status) {
            return [
                "退款",
                "退款中",
                "待退货",
                "退款完成",
                "退款关闭",
                "退款被拒",
            ][status];
        },
        //swiper 切换
        changeTab(e) {
            this.tabCurrentIndex = e.target.current;
            this.loadData("tabChange");
        },
        //顶部tab点击
        tabClick(index) {
            this.tabCurrentIndex = index;
        },
        //删除订单
        async deleteOrder(order_id, key) {
            uni.showModal({
                title: "提示",
                content: "确认删除吗？",
                showCancel: true,
                success: async ({ confirm, cancel }) => {
                    if (confirm) {
                        uni.showLoading({
                            title: "请稍后",
                        });
                        this.$request
                            .post("api/wanlshop.groups.order/delOrder", {
                                id: order_id,
                            })
                            .then((res) => {
                                this.navList[
                                    this.tabCurrentIndex
                                ].orderList.splice(key, 1);
                                uni.hideLoading();
                            });
                    }
                },
            });

            // await uni.request({
            //     url: "/wanlshop/groups/order/delOrder",
            //     method: "POST",
            //     data: {
            //         id: order_id,
            //     },
            //     success: (res) => {
            //         this.navList[this.tabCurrentIndex].orderList.splice(key, 1);
            //         uni.hideLoading();
            //     },
            // });
        },
        //取消订单- 设置为7 -全局
        async cancelOrder(item) {
            uni.showModal({
                title: "提示",
                content: "确认取消吗？",
                showCancel: true,
                success: async ({ confirm, cancel }) => {
                    if (confirm) {
                        uni.showLoading({
                            title: "请稍后",
                        });
                        // 获取列表
                        await this.$request
                            .post("api/wanlshop.groups.order/cancelOrder", {
                                id: item.id,
                            })
                            .then((res) => {
                                let { stateTip, stateTipColor } =
                                    this.orderStateExp(7);
                                item = Object.assign(item, {
                                    state: 7,
                                    stateTip,
                                    stateTipColor,
                                });
                                this.$store.commit("statistics/order", {
                                    groups:
                                        this.$store.state.statistics.order
                                            .groups - 1,
                                });
                                // 取消订单后删除待付款中该项，并修改全部中的状态 1.0.2升级
                                let list = this.navList[1].orderList;
                                let index = list.findIndex(
                                    (val) => val.id === item.id
                                );
                                index !== -1 && list.splice(index, 1);
                                // 删除后修改全部中的为7
                                if (this.tabCurrentIndex == 1) {
                                    let list = this.navList[0].orderList;
                                    let index = list.findIndex(
                                        (val) => val.id === item.id
                                    );
                                    if (index !== -1) {
                                        list[index].state = 7;
                                    }
                                }
                                uni.showToast({
                                    title: "取消成功",
                                    icon: "none",
                                });
                                uni.hideLoading();
                            });
                    }
                },
            });
        },
        commentOrder(id) {
            this.$wanlshop.to(
                `/upRelease/comment/comment?order_id=${id}&type=groups`
            );
        },
        //支付订单
        paymentOrder(id) {
            this.$wanlshop.to(
                `/pages/page/paysuccess?order_id=${id}&order_type=groups`
            );
        },
        // 拼团详情
        onDetails(id, type) {
            if (type === "order") {
                this.$wanlshop.to(`/pages/apps/groups/order/details?id=${id}`);
            } else {
                this.$wanlshop.to(`/pages/apps/groups/team?id=${id}`);
            }
        },
        toLogistics(order_id) {
            this.$wanlshop.to(
                `/pages/apps/groups/order/logistics?id=${order_id}`
            );
        },
        //确认收货- 全局
        async confirmOrder(item) {
            // 获取列表
            // await uni.request({
            //     url: "/wanlshop/groups/order/confirmOrder",
            //     method: "POST",
            //     data: {
            //         id: item.id,
            //     },
            //     success: (res) => {
            //         // this.$store.commit('statistics/order', {
            //         // 	receiving: this.$store.state.statistics.order.receiving - 1,
            //         // 	evaluate: this.$store.state.statistics.order.evaluate + 1
            //         // });
            //     },
            // });
            uni.showModal({
                title: "提示",
                content: "确认收货吗？",
                showCancel: true,
                success: async ({ confirm, cancel }) => {
                    if (confirm) {
                        uni.showLoading({
                            title: "请稍后",
                        });
                        this.$request
                            .post("api/wanlshop.groups.order/confirmOrder", {
                                id: item.id,
                            })
                            .then((res) => {
                                console.log(res, "56789876543456789");
                                let { stateTip, stateTipColor } =
                                    this.orderStateExp(4);
                                item = Object.assign(item, {
                                    state: 5,
                                    stateTip,
                                    stateTipColor,
                                });
                                uni.hideLoading();
                            });
                    } else {
                        uni.showToast({
                            title: "已取消",
                            icon: "none",
                        });
                        uni.hideLoading();
                    }
                },
            });
        },
        // 修改地址
        editAddress(id) {
            this.$wanlshop.to(
                "/pages/user/address/address?source=2&order_id=" + id
            );
        },
        //添加或修改成功之后回调
        async refreshList(address_id, order_id) {
            uni.showLoading({
                title: "正在提交新地址",
            });
            // 获取列表
            await uni.request({
                url: "/wanlshop/groups/order/editOrderAddress",
                method: "POST",
                data: {
                    id: order_id,
                    address_id: address_id,
                },
                success: (res) => {
                    this.$wanlshop.msg("地址修改成功");
                    uni.hideLoading();
                },
            });
        },
    },
};
</script>

<style lang="scss">
page {
    height: 100%;
}
</style>
